<template>
  <div class="chat-container">
    <div class="header">
      <h2>中医体质辨识系统 - 聊天室</h2>
      <div class="header-actions">
        <button class="back-btn" @click="goBack">返回</button>
        <button class="logout-btn" @click="handleLogout">{{ isPatientMode ? '退出' : '退出登录' }}</button>
      </div>
    </div>
    
    <div class="content">
      <!-- 医生模式显示侧边栏 -->
      <div class="chat-sidebar" v-if="!isPatientMode">
        <div class="user-info">
          <h3>{{ doctorName }}</h3>
          <p>医生</p>
        </div>
        <div class="user-list">
          <h4>患者列表</h4>
          <div v-if="loading" class="loading">加载中...</div>
          <div v-else-if="patients.length === 0" class="empty-list">暂无患者</div>
          <div v-else class="patient-items">
            <div 
              v-for="patient in patients" 
              :key="patient.id" 
              :class="['patient-item', { active: currentPatient && currentPatient.id === patient.id }]"
              @click="selectPatient(patient)"
            >
              <div class="patient-name">{{ patient.name }}</div>
              <div class="patient-status" v-if="patient.unread">
                <span class="unread-badge">{{ patient.unread }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 患者模式显示简化版侧边栏 -->
      <div class="chat-sidebar patient-sidebar" v-if="isPatientMode">
        <div class="user-info">
          <h3>{{ doctorName }}</h3>
          <p>医生</p>
        </div>
      </div>
      
      <div class="chat-main" :class="{ 'patient-chat': isPatientMode }">
        <div v-if="!currentPatient && !isPatientMode" class="no-selection">
          <p>请选择一位患者开始聊天</p>
        </div>
        <template v-else>
          <div class="chat-header">
            <h3>{{ isPatientMode ? '在线咨询' : currentPatient.name }}</h3>
          </div>
          
          <div class="chat-messages" ref="messagesContainer">
            <div v-if="messages.length === 0" class="empty-messages">
              <p>暂无消息记录</p>
            </div>
            <!-- 在消息列表部分 -->
            <div v-else class="message-list">
              <div 
                v-for="(message, index) in messages" 
                :key="index" 
                :class="['message-item', { 'message-self': isPatientMode ? message.sender === 'patient' : message.sender === 'doctor' }]"
              >
                <!-- 修改发送者显示逻辑 -->
                <div class="message-sender">
                  {{ message.sender === 'doctor' ? doctorName : (currentPatient ? currentPatient.name : '患者') }}
                </div>
                <div class="message-content">{{ message.content }}</div>
                <div class="message-time">{{ formatTime(message.time) }}</div>
              </div>
            </div>
          </div>
          
          <div class="chat-input">
            <textarea 
              v-model="newMessage" 
              placeholder="请输入消息..." 
              @keyup.enter="sendMessage"
            ></textarea>
            <button @click="sendMessage">发送</button>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, nextTick, onBeforeUnmount, computed } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { getUserList } from '../api/user';
// 导入管理员登录方法
import { adminLogin } from '../api/index';
// 导入医生API
import { getDoctorList } from '../api/doctor';

// 导入聊天API
import { 
  getChatList,
  sendChatMessage, 
  getChatHistory, 
  markMessagesAsRead, 
  getUnreadCount 
} from '../api/chatutils';

const router = useRouter();
const doctorName = ref('医生');
const doctorId = ref(null);
const loading = ref(false);
const patients = ref([]);
const currentPatient = ref(null);
const messages = ref([]);
const newMessage = ref('');
const messagesContainer = ref(null);
// 移除WebSocket相关变量
// const websocket = ref(null);

// 格式化时间
const formatTime = (timestamp) => {
  const date = new Date(timestamp);
  return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
};

// 移除WebSocket初始化函数
// 替换为定时轮询函数
const startMessagePolling = (userId) => {
  // 每5秒轮询一次新消息
  const pollingInterval = setInterval(async () => {
    if (currentPatient.value) {
      try {
        // 获取最新消息
        await checkNewMessages();
      } catch (error) {
        console.error('轮询消息失败:', error);
      }
    }
  }, 5000);
  
  // 返回清除函数
  return () => clearInterval(pollingInterval);
};

// 检查新消息
const checkNewMessages = async () => {
  if (!currentPatient.value || !doctorId.value) return;
  
  const mode = router.currentRoute.value.query.mode;
  const senderId = mode === 'patient' ? doctorId.value : currentPatient.value.id;
  const receiverId = mode === 'patient' ? currentPatient.value.id : doctorId.value;
  
  try {
    // 获取最新的聊天记录
    const response = await getChatHistory(
      mode === 'patient' ? currentPatient.value.id : doctorId.value,
      mode === 'patient' ? doctorId.value : currentPatient.value.id
    );
    
    if (response.code === 0 && response.data) {
      // 如果消息数量不同，说明有新消息
      if (response.data.length > messages.value.length) {
        // 更新消息列表 - 修改这里的判断逻辑
        messages.value = response.data.map(msg => {
          // 明确判断发送者是谁
          const isSentByDoctor = msg.senderId === doctorId.value;
          return {
            sender: isSentByDoctor ? 'doctor' : 'patient',
            content: msg.content,
            time: new Date(msg.createTime)
          };
        });
        
        // 按时间排序
        messages.value.sort((a, b) => a.time - b.time);
        
        // 滚动到底部
        nextTick(() => {
          scrollToBottom();
        });
        
        // 标记消息为已读
        await markMessagesAsRead(senderId, receiverId);
      }
    }
  } catch (error) {
    console.error('检查新消息失败:', error);
  }
};

// 确保有管理员权限
const ensureAdminAuth = async () => {
  try {
    // 检查是否已有有效token
    const token = localStorage.getItem('token');
    if (!token) {
      console.log('未找到token，尝试管理员登录');
      await adminLogin();
    } else {
      // 这里可以添加token有效性检查逻辑
      console.log('已有token，继续使用');
    }
  } catch (error) {
    console.error('获取管理员权限失败', error);
    ElMessage.error('获取权限失败，请刷新页面重试');
  }
};

// 加载患者列表
const loadPatients = async () => {
  if (!doctorId.value) return;
  
  loading.value = true;
  try {
    // 修改：使用getChatList接口获取与当前医生有关的所有患者
    const chatListRes = await getChatList({ doctorId: doctorId.value });
    
    if (chatListRes.code === 0 && chatListRes.data) {
      // 删除调试日志
      
      // 提取所有与医生有关的患者ID（去重）
      const patientIds = [...new Set(
        chatListRes.data
          .filter(chat => chat.senderId == doctorId.value || chat.receiverId == doctorId.value)
          .map(chat => chat.senderId == doctorId.value ? chat.receiverId : chat.senderId)
      )];
      
      // 删除调试日志
      
      if (patientIds.length === 0) {
        // 如果没有聊天记录，获取所有患者
        const res = await getUserList({ role: 'user', del: 0 });
        
        if (res.code === 0 && res.data) {
          patients.value = res.data.map(user => ({
            id: user.id,
            name: user.name || `患者${user.id}`,
            unread: 0 // 未读消息数
          }));
        } else {
          ElMessage.error(res.msg || '获取患者列表失败');
        }
      } else {
        // 根据患者ID获取患者详细信息
        const patientPromises = patientIds.map(id => getUserList({ id, del: 0 }));
        const patientResults = await Promise.all(patientPromises);
        
        // 构建患者列表
        patients.value = [];
        patientResults.forEach(res => {
          if (res.code === 0 && res.data && res.data.length > 0) {
            const user = res.data[0];
            patients.value.push({
              id: user.id,
              name: user.name || `患者${user.id}`,
              unread: 0 // 初始化未读消息数
            });
          }
        });
      }
      
      // 获取每个患者的未读消息数
      for (const patient of patients.value) {
        try {
          // 修改：获取特定患者的未读消息数
          const unreadRes = await getUnreadCount(doctorId.value, patient.id);
          if (unreadRes.code === 0) {
            // 设置该患者的未读消息数
            patient.unread = unreadRes.data || 0;
          }
        } catch (error) {
          console.error(`获取患者${patient.id}未读消息数失败:`, error);
        }
      }
    } else {
      ElMessage.error(chatListRes.msg || '获取聊天列表失败');
    }
  } catch (error) {
    console.error('加载患者列表失败:', error);
    ElMessage.error('加载患者列表失败');
  } finally {
    loading.value = false;
  }
};

// 选择患者
const selectPatient = (patient) => {
  currentPatient.value = patient;
  // 重置未读消息数
  if (patient.unread) {
    patient.unread = 0;
  }
  // 加载与该患者的聊天记录
  loadMessages(patient.id);
  
  // 标记消息为已读
  markMessagesToRead(patient.id, doctorId.value);
};

// 加载聊天记录
const loadMessages = async (patientId) => {
  try {
    // 使用正确的API调用方式，确保参数类型匹配
    const response = await getChatHistory(patientId, doctorId.value);
    if (response.code === 0 && response.data) {
      // 转换消息格式 - 修改这里的判断逻辑
      messages.value = response.data.map(msg => {
        // 明确判断发送者是谁
        const isSentByDoctor = msg.senderId == doctorId.value;
        return {
          sender: isSentByDoctor ? 'doctor' : 'patient',
          content: msg.content,
          time: new Date(msg.createTime)
          // 删除调试信息
        };
      });
      
      // 删除调试日志
      
      // 按时间排序
      messages.value.sort((a, b) => a.time - b.time);
    } else {
      // 如果API调用失败，使用模拟数据
      messages.value = [
        {
          sender: 'doctor',
          content: '您好，有什么可以帮助您的吗？',
          time: new Date(Date.now() - 3600000)
        },
        {
          sender: 'patient',
          content: '医生，我最近感觉很疲惫，请问是什么原因？',
          time: new Date(Date.now() - 3500000)
        },
        {
          sender: 'doctor',
          content: '根据您的体质测试结果，您属于气虚质。气虚质的人容易疲劳，建议您多休息，饮食上可以多吃一些补气的食物。',
          time: new Date(Date.now() - 3400000)
        }
      ];
    }
    
    // 滚动到底部
    await nextTick();
    scrollToBottom();
  } catch (error) {
    console.error('加载聊天记录失败:', error);
    ElMessage.error('加载聊天记录失败');
    
    // 使用模拟数据
    messages.value = [
      {
        sender: 'doctor',
        content: '您好，有什么可以帮助您的吗？',
        time: new Date(Date.now() - 3600000)
      }
    ];
  }
};

// 标记消息为已读
const markMessagesToRead = async (senderId, receiverId) => {
  try {
    // 使用正确的API调用方式，确保参数类型匹配
    await markMessagesAsRead(senderId, receiverId);
  } catch (error) {
    console.error('标记消息为已读失败:', error);
  }
};

// 发送消息
const sendMessage = async () => {
  if (!newMessage.value.trim() || !currentPatient.value) return;
  
  const messageContent = newMessage.value.trim();
  const mode = router.currentRoute.value.query.mode;
  
  // 添加新消息到本地显示
  messages.value.push({
    sender: mode === 'patient' ? 'patient' : 'doctor',
    content: messageContent,
    time: new Date()
  });
  
  // 清空输入框
  newMessage.value = '';
  
  // 滚动到底部
  nextTick(() => {
    scrollToBottom();
  });
  
  // 发送消息到服务器
  try {
    let senderId, receiverId;
    if (mode === 'patient') {
      // 患者模式，发送者是患者，接收者是医生
      senderId = currentPatient.value.id;
      receiverId = doctorId.value;
      console.log('患者模式发送消息给医生:', receiverId, messageContent);
    } else {
      // 医生模式，发送者是医生，接收者是患者
      senderId = doctorId.value;
      receiverId = currentPatient.value.id;
      console.log('医生模式发送消息给患者:', receiverId, messageContent);
    }
    
    // 调用API发送消息
    const response = await sendChatMessage({
      senderId,
      receiverId,
      content: messageContent,
      type: 0, // 文本消息
      isRead: 0 // 未读
    });
    
    if (response.code !== 0) {
      ElMessage.error(response.msg || '发送消息失败');
    }
  } catch (error) {
    console.error('发送消息失败:', error);
    ElMessage.error('发送消息失败，请重试');
  }
};

// 滚动到底部
const scrollToBottom = () => {
  if (messagesContainer.value) {
    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
  }
};

// 返回上一页
const goBack = () => {
  router.back();
};

// 退出登录
const handleLogout = () => {
  // 移除WebSocket相关代码
  localStorage.removeItem('doctorInfo');
  router.push('/');
};

// 监听消息变化，自动滚动到底部
watch(messages, () => {
  nextTick(() => {
    scrollToBottom();
  });
});

// 清除轮询的函数
let clearPolling = null;

onMounted(async () => {
  // 获取路由参数
  const mode = router.currentRoute.value.query.mode;
  const userId = router.currentRoute.value.query.userId;
  const doctorIdFromRoute = router.currentRoute.value.query.doctorId;
  
  console.log('路由参数:', { mode, userId, doctorIdFromRoute });
  
  if (mode === 'patient') {
    // 患者模式
    if (!userId) {
      ElMessage.error('无法获取用户信息，请重新登录');
      router.push('/login');
      return;
    }
    
    if (!doctorIdFromRoute) {
      ElMessage.error('未选择医生，请返回重新选择');
      router.back();
      return;
    }
    
    // 初始化患者聊天界面
    try {
      // 确保有权限
      await ensureAdminAuth();
      
      // 设置医生ID
      doctorId.value = doctorIdFromRoute;
      console.log('设置医生ID:', doctorId.value);
      
      // 修改：使用getDoctorList API获取医生详细信息
      const doctorRes = await getDoctorList({ id: doctorIdFromRoute });
      if (doctorRes.code === 0 && doctorRes.data && doctorRes.data.length > 0) {
        const doctor = doctorRes.data[0];
        doctorName.value = doctor.name || '医生';
        console.log('找到医生:', doctorName.value);
      } else {
        console.log('未找到医生信息，使用默认名称');
      }
      
      // 创建一个虚拟的患者列表，只包含当前用户
      const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}');
      const patientName = userInfo.name || `患者${userId}`;
      
      patients.value = [{
        id: userId,
        name: patientName,
        unread: 0
      }];
      
      // 自动选择当前患者
      currentPatient.value = patients.value[0];
      console.log('设置当前患者:', currentPatient.value);
      
      // 启动消息轮询
      clearPolling = startMessagePolling(userId);
      
      // 加载与医生的聊天记录
      console.log('加载聊天记录，患者ID:', userId, '医生ID:', doctorId.value);
      loadMessages(userId);
      
      // 标记消息为已读
      markMessagesToRead(doctorIdFromRoute, userId);
    } catch (error) {
      console.error('初始化患者聊天界面失败:', error);
      ElMessage.error('初始化聊天失败，请刷新页面重试');
    }
  } else {
    // 医生模式
    const doctorInfo = localStorage.getItem('doctorInfo');
    if (!doctorInfo) {
      router.push('/login');
      return;
    }
    
    try {
      // 在组件挂载时进行一次管理员登录，确保有权限
      await ensureAdminAuth();
      
      const doctor = JSON.parse(doctorInfo);
      doctorName.value = doctor.name || '医生';
      doctorId.value = doctor.id;
      
      // 启动消息轮询
      clearPolling = startMessagePolling(doctor.id);
      
      // 加载患者列表
      loadPatients();
      
      // 定期检查未读消息
      const checkUnreadInterval = setInterval(async () => {
        if (!doctorId.value) return;
        
        try {
          const response = await getUnreadCount(doctorId.value);
          
          if (response.code === 0 && response.data && response.data.length > 0) {
            // 如果有未读消息，刷新患者列表
            loadPatients();
          }
        } catch (error) {
          console.error('检查未读消息失败:', error);
        }
      }, 30000); // 每30秒检查一次
      
      // 组件卸载时清除定时器
      onBeforeUnmount(() => {
        clearInterval(checkUnreadInterval);
      });
    } catch (e) {
      console.error('解析医生信息失败', e);
    }
  }
});

// 组件卸载前清除轮询
onBeforeUnmount(() => {
  if (clearPolling) {
    clearPolling();
  }
});

// 添加计算属性
const isPatientMode = computed(() => {
  return router.currentRoute.value.query.mode === 'patient';
});
</script>

<style scoped src="../css/chat.css"></style>